<template>
  <view class="page">
    <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
      <u-form-item label="学院" prop="deptName" label-width="200" required>
        <u-input placeholder="学院" v-model="model.deptName" :disabled="true" type="text" maxlength="200"></u-input>
      </u-form-item>
      <u-form-item label="辅导员姓名" prop="name" label-width="200" required>
        <u-input placeholder="辅导员姓名" v-model="model.name" :disabled="true" type="text" maxlength="200"></u-input>
      </u-form-item>
      <u-form-item label="工号" prop="account" label-width="200" required>
        <u-input placeholder="工号" v-model="model.account" :disabled="true" type="text" maxlength="200"></u-input>
      </u-form-item>
      <u-form-item label="年级" prop="njCode" label-width="180" required>
        <js-checkbox v-model="model.njCode" :items="njCodeOption" :disabled="disabled" itemLabel="label"
          itemValue="value" placeholder="请选择年级"></js-checkbox>
      </u-form-item>
      <u-form-item label="专业" prop="zyCode" label-width="180" label-position="top" required>
        <scroll-view :scroll-top="scrollTop" :scroll-y="scrollY" :class="{'scroll-Y': isScroll}" @scroll="scroll">
          <u-tag :text="item.zyName" :type="tagProps.type" v-for="(item, index) in model.zyList" :key="item.zyCode"
            :index="item.zyCode" :shape="tagProps.shape" :closeable="!disabled" :mode="tagProps.mode"
            :size="tagProps.size" @close="handleZyClose" style="margin-right: 10rpx;"></u-tag>
        </scroll-view>
        <u-button class="btn" type="primary" @click="chooseZy" size="mini" style="margin-right: 10rpx;"
          :disabled="disabled">
          <u-icon name="checkmark"></u-icon>
          <text style="padding-right: 4px;">选择</text>
        </u-button>
      </u-form-item>
      <u-form-item label="班级" prop="bjCode" label-width="180" label-position="top" :required="true">
        <view>
          <scroll-view :scroll-top="scrollTop" :scroll-y="scrollY" :class="{'scroll-Y': isScroll}" @scroll="scroll">
            <u-tag :text="item.bjName" :type="tagProps.type" v-for="(item, index) in model.bjList" :key="item.bjCode"
              :index="item.bjCode" :shape="tagProps.shape" :closeable="!disabled" :mode="tagProps.mode"
              :size="tagProps.size" @close="handleClose" style="margin-right: 10rpx;"></u-tag>
          </scroll-view>
        </view>
        <u-button class="btn" type="primary" @click="chooseBj" size="mini" style="margin-right: 10rpx;"
          :disabled="disabled">
          <u-icon name="checkmark"></u-icon>
          <text style="padding-right: 4px;">选择</text>
        </u-button>
      </u-form-item>
    </u-form>
    <view v-if="!disabled" class="footer">
      <view class="form-button primary" @click="submit">保存</view>
      <view class="form-button" @click="cancel">取消</view>
    </view>
    <JsMultiplePopup ref="zyPopup" :defaultVaule="model.zyList" @submit="doZySelected" :multiple="popupZy.multiple"
      :mode="popupZy.mode" :itemLabel="popupZy.itemLabel" :itemValue="popupZy.itemValue" placeholder="请输入专业名称"
      action="/api/blade-system/zyCode/listAll"></JsMultiplePopup>
    <JsMultiplePopup ref="bjPopup" :defaultVaule="model.bjList" @submit="doSelected" :multiple="popup.multiple"
      :mode="popup.mode" :itemLabel="popup.itemLabel" :itemValue="popup.itemValue" placeholder="请输入班级名称"
      action="/api/blade-system/ssbjCode/listAll"></JsMultiplePopup>
  </view>
</template>

<script>
  import MyImageUpload from '@/components/my-uploadfile/my-image-upload.vue'
  import JsPopup from '@/components/js-popup/js-popup.vue'
  import {
    validatenull
  } from '@/common/validate.js'
  import {
    selectDictValue
  } from '@/common/dict.js'
  import JsMultiplePopup from '@/components/js-multiple-popup/js-multiple-popup.vue'
  export default {
    components: {
      MyImageUpload,
      JsPopup,
      JsMultiplePopup
    },
    data() {
      return {
        model: {
          id: '',
          userId: '',
          account: '',
          expireTime: '',
          name: null,
          bjList: [],
          bjCode: '',
          bjName: '',
          zyList: [],
          njCode: ''
        },
        disabled: true,
        expireTimeShow: false,
        showClose: false,
        zyCodeOption: [],
        bjCodeOption: [],
        njCodeOption: [],
        params: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: true
        },
        popup: {
          show: false,
          mode: "bottom",
          multiple: true,
          itemLabel: 'bjName',
          itemValue: 'bjCode'
        },
        popupZy: {
          show: false,
          mode: "bottom",
          multiple: true,
          itemLabel: 'zyName',
          itemValue: 'zyCode'
        },
        isScroll: true,
        scrollTop: 0,
        scrollY: true,
        tagProps: {
          mode: 'light',
          type: 'primary',
          size: 'default',
          shape: 'square',
          closeable: true
        },
        rules: {
          njCode: [{
            required: true,
            message: '请选择年级',
            trigger: ['change', 'blur'],
          }],
          zyCode: [{
            required: true,
            message: '请选择专业',
            trigger: ['change', 'blur'],
          }],
        },
      };
    },
    mounted() {
      // this.$refs.xx.$el.style.height = this.$refs.xx.$parent.$parent.$el.clientHeight + 'px'
    },
    onLoad(params) {
      let date = new Date();
      let year = date.getFullYear();
      let data = [];
      for (let i = 0; i < 10; i++) {
        data.push({
          label: (year - i) + '',
          value: (year - i) + '',
          checked: false
        });
      }
      this.njCodeOption = data;
      this.$u.api.user.getZyDictData({}).then(res => {
        this.zyCodeOption = res.data;
      });
      this.$u.api.user.getBjDictData({}).then(res => {
        this.bjCodeOption = res.data;
      });
      let self = this;
      if (params.id) {
        this.$u.api.mis.misAssistantTalkCoach.detail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
          if (res.data.bjName != null && res.data.bjName != '') {
            let nameArr = res.data.bjName.split(',');
            let codeArr = res.data.bjCode.split(',');
            for (let i = 0; i < nameArr.length; i++) {
              this.model.bjList.push({
                bjCode: codeArr[i],
                bjName: nameArr[i]
              });
            }
          }
          if (res.data.zyName != null && res.data.zyName != '') {
            let nameArr = res.data.zyName.split(',');
            let codeArr = res.data.zyCode.split(',');
            for (let i = 0; i < nameArr.length; i++) {
              this.model.zyList.push({
                zyCode: codeArr[i],
                zyName: nameArr[i]
              });
            }
          }
          if (res.data.njCode != null && res.data.njCode != '') {
            let njArr = res.data.njCode.split(',');
            for (let i = 0; i < this.njCodeOption.length; i++) {
              for (let j = 0; j < njArr.length; j++) {
                if (this.njCodeOption[i].value === njArr[j]) {
                  this.njCodeOption[i].checked = true;
                }
              }
            }
          }
          if (this.hasPermission('misAssistantTalkCoach_edit')) {
            this.disabled = false;
          }
        });
      } else {
        this.disabled = false;
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    watch: {

    },
    methods: {
      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uni.showLoading({
              title: '提交中....'
            })
            this.$u.api.mis.misAssistantTalkCoach.save(this.model).then(res => {
              uni.hideLoading();
              uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false,
                success: function() {
                  if (res.code == 200) {
                    uni.navigateTo({
                      url: 'index'
                    });
                  }
                }
              });
            });
          } else {
            this.$u.toast('您填写的信息有误，请根据提示修正。');
          }
        });
      },
      cancel() {
        uni.navigateTo({
          url: 'index'
        });
      },
      handleDateConfirm(e) {
        this.model.expireTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ":" + e.minute + ":" + e.second;
        this.expireTimeShow = false;
      },
      chooseBj() {
        this.$refs.bjPopup.setDefaultVal(this.model.bjList);
        this.$refs.bjPopup.open();
      },
      doSelected() {
        let bjList = this.$refs.bjPopup.getData();
        if (bjList.length > 0) {
          this.model.bjCode = bjList.map(item => item.bjCode).join(",")
          this.model.bjName = bjList.map(item => item.bjName).join(",")
          this.model.bjList = bjList;
          this.$refs.bjPopup.close();
          this.$refs.bjPopup.clearAll();
        } else {
          this.$refs.bjPopup.close();
        }
      },
      handleClose(tag) {
        this.model.bjList.splice(this.model.bjList.indexOf(tag), 1);
      },
      talkTypeChange(val) {
        if (val === '2') {
          this.popup.multiple = true;
        } else if (val === '1') {
          this.popup.multiple = false;
        } else {
          this.popup.multiple = false;
          this.model.bjList = [];
        }
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      chooseZy() {
        this.$refs.zyPopup.setDefaultVal(this.model.zyList);
        this.$refs.zyPopup.open();
      },
      doZySelected() {
        let zyList = this.$refs.zyPopup.getData();
        if (zyList.length > 0) {
          this.model.zyCode = zyList.map(item => item.zyCode).join(",")
          this.model.zyName = zyList.map(item => item.bjNzyNameame).join(",")
          this.model.zyList = zyList;
          this.$refs.zyPopup.close();
          this.$refs.zyPopup.clearAll();
        } else {
          this.$refs.zyPopup.close();
        }
      },
      handleZyClose(tag) {
        this.model.zyList.splice(this.model.zyList.indexOf(tag), 1);
      },
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
    height: 100vh;
    padding-bottom: 160rpx;
    background: #F7F7F7;
  }

  .form {
    padding: 24rpx;
  }

  .u-form-item {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;

    &::after {
      display: none;
    }
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 32rpx 24rpx;
    background: #f7f7f7;
  }

  .form-button {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #999;
    background: #fff;

    &.primary {
      color: #fff;
      background: #3989FC;
    }

    &+.form-button {
      margin-left: 24rpx;
    }
  }
</style>